<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; %>
<html>
<head>
    <meta charset="UTF-8">
    <base href="<%=basePath%>">
    <title>苏半夏的个人博客</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="site.webmanifest">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/logo/blog_icon.png">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="site.webmanifest">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/logo/blog_icon.png">
    <!-- CSS here -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/flaticon.css">
    <link rel="stylesheet" href="assets/css/progressbar_barfiller.css">
    <link rel="stylesheet" href="assets/css/gijgo.css">
    <link rel="stylesheet" href="assets/css/animate.min.css">
    <link rel="stylesheet" href="assets/css/animated-headline.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/css/themify-icons.css">
    <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/nice-select.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- ? Preloader Start -->
<div id="preloader-active">
    <div class="preloader d-flex align-items-center justify-content-center">
        <div class="preloader-inner position-relative">
            <div class="preloader-circle"></div>
            <div class="preloader-img pere-text">
                <img src="assets/img/logo/loder.png" alt="">
            </div>
        </div>
    </div>
</div>
<!-- Preloader Start -->
<header>
    <!-- Header Start -->
    <div class="header-area">
        <div class="main-header ">
            <div class="header-bottom  header-sticky">
                <div class="container-fluid">
                    <div class="row align-items-center">
                        <!-- Logo -->
                        <div class="col-xl-2 col-lg-2">
                        </div>
                        <div class="col-xl-10 col-lg-10">
                            <div class="menu-wrapper  d-flex align-items-center justify-content-end">
                                <!-- Main-menu -->
                                <div class="main-menu d-none d-lg-block">
                                    <nav>
                                        <ul id="navigation">
                                            <li><a href="blogDetails/backIndex.do">首页</a></li>
                                            <li><a href="index/toSelfPage.do">个人主页</a></li>
                                            <li><a href="index/toErrorPage.do">友情链接</a></li>
                                            <li><a href="javascript:(0);">鸣谢</a></li>
                                        </ul>
                                    </nav>
                                </div>
                                <!-- Header-btn -->
                                <div class="header-right-btn d-none d-lg-block ml-20">
                                    <a href="mailto:3228314370@qq.com" class="btn header-btn">联系我</a>
                                </div>
                            </div>
                        </div>
                        <!-- Mobile Menu -->
                        <div class="col-12">
                            <div class="mobile_menu d-block d-lg-none"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->
</header>
<main>
    <!--? Hero Start -->
    <div class="slider-area2">
        <div class="slider-height2 d-flex align-items-center">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="hero-cap hero-cap2 pt-70">
                            <h2>鸣谢</h2>
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                                    <li class="breadcrumb-item"><a href="javascript:(0);">鸣谢</a></li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero End -->
    <!--? Visit Our Tailor Start -->

    <!-- Visit Our Tailor End -->
    <!--? Services Area Start -->
    <!-- Services Area End -->
    <!--? About Area Start -->
    <section class="support-company-area fix pb-padding">
        <div class="support-wrapper align-items-center">
            <div class="left-content">
                <!-- section tittle -->
                <div class="section-tittle section-tittle2 mb-30">
                    <h1>鸣 谢</h1>
                </div>
                <div class="support-caption">
                    <p class="pera-top">这里是苏半夏的博客，博主目前还是在读大学生，建立博客的主要想法也是出于对做项目的喜爱以及可以和大家分享交流的目的。博客
                        的设计和功能可能会比较匮乏，也是因为本人贫瘠的前后端能力。也欢迎各位大佬能够对我的博客网页多提建议，多交流探讨。</p>
                    <h2>感谢您的访问</h2>
                </div>
            </div>
            <div class="right-content">
                <!-- img -->
                <div class="right-img">
                    <img src="assets/img/gallery/self_home.png" alt="">
                </div>
                <div class="support-img-cap text-center d-flex">
                    <div class="single-one">
                        <span id="webBrowseTotal"></span>
                        <p>网站访问量</p>
                    </div>
                    <div class="single-two">
                        <span id="webCommentTotal"></span>
                        <p>交流次数</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- About Area End -->
    <section style="padding-bottom: 80px">
        <div class="comment-form " style="width: 75%;margin-right: auto;margin-left: auto">
            <h4>留下您的建议</h4>
            <form class="form-contact comment_form" id="commentForm">
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <textarea class="form-control w-100" name="comment" id="comment" cols="30" rows="9"
                                      placeholder="感谢您留下建议"></textarea>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <input class="form-control" name="name" id="nickName" type="text" placeholder="昵称">
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <input class="form-control" name="email" id="email" type="email" placeholder="电子邮箱">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <button type="button" class="button button-contactForm btn_1 boxed-btn" id="saveCommentBtn">提 交</button>
                </div>
            </form>
        </div>
        <div class="comments-area" style="width: 75%;margin-right: auto;margin-left: auto">
            <h4>建议</h4>
            <div class="comment-list">
<%--                <div class="single-comment justify-content-between d-flex">--%>
<%--                    <div class="user justify-content-between d-flex">--%>
<%--                        <div class="thumb">--%>
<%--                            <img src="assets/img/blog/comment_1.png" alt="">--%>
<%--                        </div>--%>
<%--                        <div class="desc">--%>
<%--                            <p class="comment">--%>
<%--                                Multiply sea night grass fourth day sea lesser rule open subdue female fill which them--%>
<%--                                Blessed, give fill lesser bearing multiply sea night grass fourth day sea lesser--%>
<%--                            </p>--%>
<%--                            <div class="d-flex justify-content-between">--%>
<%--                                <div class="d-flex align-items-center">--%>
<%--                                    <h5>--%>
<%--                                        <a href="#">Emilly Blunt</a>--%>
<%--                                    </h5>--%>
<%--                                    <p class="date">December 4, 2017 at 3:12 pm </p>--%>
<%--                                </div>--%>
<%--                                <div class="reply-btn">--%>
<%--                                    <a href="#" class="btn-reply text-uppercase">reply</a>--%>
<%--                                </div>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
            </div>
        </div>

    </section>

</main>
<footer>
    <div class="footer-wrapper">
        <!-- footer-bottom area -->
        <div class="footer-bottom-area">
            <div class="container">
                <div class="footer-border">
                    <div class="row d-flex align-items-center">
                        <div class="col-xl-12 ">
                            <div class="footer-copy-right text-center">
                                <p>With the earth and the sky and the water,
                                    remade, like a casket of gold
                                    For my dreams of your image that blossoms
                                    a rose in the deeps of my heart.</p>
                                <p>For My NingNing</p>
                                <p>
                                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                                    Not only for record learning, but also for recording our love <i class="fa fa-heart"
                                                                                                     aria-hidden="true"></i>
                                    From 20200709
                                    <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer End-->
    </div>
</footer>

<!-- Scroll Up -->
<div id="back-top">
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<!-- JS here -->

<script src="./assets/js/vendor/modernizr-3.5.0.min.js"></script>
<!-- Jquery, Popper, Bootstrap -->
<script src="./assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="./assets/js/popper.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<!-- Jquery Mobile Menu -->
<script src="./assets/js/jquery.slicknav.min.js"></script>

<!-- Jquery Slick , Owl-Carousel Plugins -->
<script src="./assets/js/owl.carousel.min.js"></script>
<script src="./assets/js/slick.min.js"></script>
<!-- One Page, Animated-HeadLin -->
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/js/animated.headline.js"></script>
<script src="./assets/js/jquery.magnific-popup.js"></script>

<!-- Date Picker -->
<script src="./assets/js/gijgo.min.js"></script>
<!-- Nice-select, sticky -->
<script src="./assets/js/jquery.nice-select.min.js"></script>
<script src="./assets/js/jquery.sticky.js"></script>
<!-- Progress -->
<script src="./assets/js/jquery.barfiller.js"></script>

<!-- counter , waypoint,Hover Direction -->
<script src="./assets/js/jquery.counterup.min.js"></script>
<script src="./assets/js/waypoints.min.js"></script>
<script src="./assets/js/jquery.countdown.min.js"></script>
<script src="./assets/js/hover-direction-snake.min.js"></script>

<!-- contact js -->
<script src="./assets/js/contact.js"></script>
<script src="./assets/js/jquery.form.js"></script>
<script src="./assets/js/jquery.validate.min.js"></script>
<script src="./assets/js/mail-script.js"></script>
<script src="./assets/js/jquery.ajaxchimp.min.js"></script>

<!-- Jquery Plugins, main Jquery -->
<script src="./assets/js/plugins.js"></script>
<script src="./assets/js/main.js"></script>
<script type="text/javascript">
    $(function () {
        function queryBrowseAndComment() {
            $.ajax({
                url: "index/queryWebAndCommentTotal.do",
                type: "post",
                dataType: "json",
                success: function (data) {
                    $("#webBrowseTotal").append(data.webBrowseTotal / 2)
                    $("#webCommentTotal").append(data.webCommentTotal)
                }
            })
        }

        queryBrowseAndComment()

        //给提交评论按钮添加单击事件
        $("#saveCommentBtn").click(function () {
            var comment = $("#comment").val()
            if (comment == ""){
                alert("评论不能为空")
                return;
            }
            var nickName = $("#nickName").val()
            if (nickName == ""){
                alert("昵称不能为空")
                return;
            }
            var email = $("#email").val()
            $.ajax({
                url: "index/saveCommentThankPage.do",
                data:{
                    comment:comment,
                    nickName:nickName,
                    email:email
                },
                type: "post",
                dataType: "json",
                success:function (data) {
                    if (data.code == 1){
                        $("#commentForm").get(0).reset()
                        queryCommentThankPage()
                    }else {
                        alert(data.message)
                    }
                }
            })
        })

        function queryCommentThankPage() {
            $.ajax({
                url:"index/queryCommentThankPage.do",
                type:"post",
                dataType:"json",
                success:function (data) {
                    var htmlStr = ""
                    var pic = 0
                    $.each(data,function (index, obj) {
                        pic %= 12
                        var m = (obj.createDate).substr(5,2)
                        var mouth = ""
                        switch (m) {
                            case "01" :
                                mouth = "January";
                                break;
                            case "02" :
                                mouth = "February";
                                break;
                            case "03" :
                                mouth = "March";
                                break;
                            case "04" :
                                mouth = "April";
                                break;
                            case "05" :
                                mouth = "May";
                                break;
                            case "06" :
                                mouth = "June";
                                break;
                            case "07" :
                                mouth = "July";
                                break;
                            case "08" :
                                mouth = "August";
                                break;
                            case "09" :
                                mouth = "September";
                                break;
                            case "10" :
                                mouth = "October";
                                break;
                            case "11" :
                                mouth = "November";
                                break;
                            case "12" :
                                mouth = "December";
                                break;
                        }
                        var day = (obj.createDate).substr(8,2)
                        var year = (obj.createDate).substr(0,4)
                        htmlStr += "<div class=\"single-comment justify-content-between d-flex\">"
                        htmlStr += "<div class=\"user justify-content-between d-flex\">"
                        htmlStr += "<div class=\"thumb\">"
                        htmlStr += "<img src=\"assets/img/blog/"+pic+".png\" alt=''>"
                        htmlStr += "</div>"
                        htmlStr += "<div class=\"desc\">"
                        htmlStr += "<p class=\"comment\">" + obj.comment + "</p>"
                        htmlStr += "<div class=\"d-flex justify-content-between\">"
                        htmlStr += "<div class=\"d-flex align-items-center\">"
                        htmlStr += "<h5>"
                        htmlStr += "<a href='javascript:(0);'>" + obj.nickName + "</a>"
                        htmlStr += "</h5>"
                        htmlStr += "<p class=\"date\">" + mouth + " " + day+ "," + " " + year + "</p>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                        htmlStr += "</div>"
                        pic += 1
                    })
                    $(".comment-list").html(htmlStr)
                }
            })
        }

        queryCommentThankPage()
    })
</script>
</body>
</html>